import React from 'react'
import { PropTypes } from 'prop-types';
import styles from '../css/About.less';
// import { Route, Link as ALink } from 'react-router-dom';
// import RoleComponent from './RoleComponent';

/*export default class About extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    return (
      <div>
        <h1>我是新版创建组件的方法</h1>
      </div>
    );
  }
}

// About.propTypes = {
//   match: PropTypes.objectOf(PropTypes.any).isRequired,
// };*/


class TabItem extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: PropTypes.string,
      activeName: PropTypes.string,
      onClick: PropTypes.func,
      children: PropTypes.nodes
    };
    this.handleClick = this.handleClick.bind(this,this.props.name); //带参数的方法
  }

  handleClick(name) {
    console.log(444,name);
    this.setState({
      name: this.props.name,
    });
  }

  render() {
    return (
        <li onClick={this.handleClick} className={this.props.activeName === this.props.name ? 'active' : 'noActive'}>
          <p className={styles.switchBtn}>{this.props.name}</p>
          <div className={this.props.active ? 'show' : 'hide'}>
            {this.props.children}
          </div>
        </li>
    )
  }
}

class Tab extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      children: PropTypes.node,
      onClickItem: PropTypes.func,
      activeName: PropTypes.string
    };
  }
  render() {
    return (
        <ul>
          {
            React.Children.map(this.props.children,(child)=>{
              if (child.type === TabItem) {
                return React.cloneElement(child, {
                  // 把父组件的props.name赋值给每个子组件（父组件传值给子组件）
                  activeName: this.props.activeName,
                  // 父组件的方法挂载到props.onClick上，以便子组件内部通过props调用
                  onClick: this.props.onClickItem
                })
              } else {
                return child
              }
            })
          }
        </ul>
    )
  }
}

export default class About extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      activeName: '武汉'
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(1111);
    this.setState({
      activeName: this.props.activeName,
    });
  }
  // handleClick = (name) => {
  //   this.setState({
  //     activeName: name
  //   })
  // }

  render() {
    return (
        <Tab activeName={this.state.activeName}  onClick={this.handleClick} >
          <TabItem name={'武汉'} >
            武汉武汉武汉，这里有一大堆jsx代码
          </TabItem>
          <TabItem name={'上海'} >
            上海上海上海，这里有一大堆jsx代码
          </TabItem>
          <TabItem name={'北京'} >
            北京北京北京，这里有一大堆jsx代码
          </TabItem>
        </Tab>
    )
  }
}

